<template>
  <div class="header-container">
    <div class="wrapper">
      <!--   logo   -->
      <div class="left-wrapper v-link selected" onclick="javascript:window.location='/'">
        <img style="width:   50px" width="50" height="50" src="~assets/images/logo.png">
        <span class="text">尚医通   预约挂号统一平台</span>
      </div>
      <!--    右侧    -->
      <div
        class="right-wrapper">
        <span class="v-link clickable">帮助中心</span>
        <span v-if="name==''" class="v-link clickable" @click="showLogin()" id="loginDialog">登录/注册</span>

        <el-dropdown v-if="name!=''" @command="loginMenu">
            <span class="user-name el-dropdown-link clickable">
                    {{ name }}<i class="el-icon-arrow-down iconfont"></i>
            </span>
          <el-dropdown-menu class="user-name-wrapper" slot="dropdown">
            <el-dropdown-item command="/user">实名认证</el-dropdown-item>
            <el-dropdown-item command="/order">挂号订单</el-dropdown-item>
            <el-dropdown-item command="/patient">就诊人管理</el-dropdown-item>
            <el-dropdown-item command="/logout" divided>退出登录</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
    </div>
    <!--  登录弹出层  -->

    <el-dialog
      :visible.sync="dialogUserFormVisible" style="text-align:  left;" top="50px" :append-to-body="true" width="960px"
      @close="closeDialog()">

      <div
        class="container">

        <!--  手机登录  #start  -->

        <div
          class="operate-view" v-if="dialogAtrr.showLoginType  ===  'phone'">

          <div
            class="wrapper" style="width:  100%">

            <div
              class="mobile-wrapper" style="position:  static;width:  70%">
              <span class="title">{{ dialogAtrr.labelTips }}</span>

              <el-form>

                <el-form-item>

                  <el-input
                    v-model="dialogAtrr.inputValue" :placeholder="dialogAtrr.placeholder"
                    :maxlength="dialogAtrr.maxlength" class="input  v-input">
                    <span slot="suffix" class="sendText  v-link" v-if="dialogAtrr.second  >  0">{{
                        dialogAtrr.second
                      }}s  </span>
                    <span slot="suffix" class="sendText  v-link  highlight  clickable  selected"
                          v-if="dialogAtrr.second  ==  0" @click="getCodeFun()">重新发送  </span>
                  </el-input>

                </el-form-item>

              </el-form>

              <div
                class="send-button  v-button" @click="btnClick()"> {{ dialogAtrr.loginBtn }}
              </div>
            </div>

            <div
              class="bottom">

              <div
                class="wechat-wrapper" @click="weixinLogin()"><span
                class="iconfont  icon"></span></div>
              <span class="third-text">  第三方账号登录  </span></div>
          </div>
        </div>
        <!--  手机登录  #end  -->
        <!--  微信登录  #start  -->
        <div
          class="operate-view" v-if="dialogAtrr.showLoginType  ===  'weixin'">
          <div
            class="wrapper  wechat" style="height:  400px">
            <div>
              <div
                id="weixinLogin">
              </div>
            </div>
            <div
              class="bottom  wechat" style="margin-top:  -80px;">
              <div
                class="phone-container">
                <div
                  class="phone-wrapper" @click="phoneLogin()"><span
                  class="iconfont  icon"></span></div>
                <span class="third-text">  手机短信验证码登录  </span></div>
            </div>
          </div>
        </div>
        <!--  微信登录  #end  -->


        <div
          class="info-wrapper">

          <div
            class="code-wrapper">

            <div><img src="//img.114yygh.com/static/web/code_login_wechat.png" class="code-img">

              <div
                class="code-text"><span class="iconfont  icon"></span>微信扫一扫关注

              </div>

              <div
                class="code-text"> “快速预约挂号”
              </div>
            </div>

            <div
              class="wechat-code-wrapper"><img
              src="//img.114yygh.com/static/web/code_app.png"
              class="code-img">

              <div
                class="code-text"> 扫一扫下载
              </div>

              <div
                class="code-text"> “预约挂号”APP
              </div>
            </div>
          </div>

          <div
            class="slogan">

            <div>xxxxxx官方指定平台</div>

            <div>快速挂号 安全放心</div>
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import cookie from 'js-cookie'
import Vue from 'vue'

import userInfoApi from '@/api/user/userInfo'
import smsApi from '@/api/msm/msm'
import hospApi from '@/api/hosp/hospital'
import weixinApi from '@/api/user/weixin'

const defaultDialogAtrr = {
  showLoginType: 'phone',   //   控制手机登录与微信登录切换

  labelTips: '手机号码',   //   输入框提示

  inputValue: '',   //   输入框绑定对象
  placeholder: '请输入您的手机号',   //   输入框placeholder
  maxlength: 11,   //   输入框长度控制

  loginBtn: '获取验证码',   //   登录按钮或获取验证码按钮文本

  sending: true,                  //   是否可以发送验证码
  second: -1,                        //   倒计时间      second>0   :   显示倒计时   second=0   ：重新发送   second=-1   ：什么都不显示
  clearSmsTime: null      //   倒计时定时任务引用   关闭登录层清除定时任务
}
export default {
  data() {
    return {
      userInfo: {
        phone: '',
        code: '',
        openid: ''
      },
      dialogUserFormVisible: false,
      //   弹出层相关属性
      dialogAtrr: defaultDialogAtrr,

      name: ''   //   用户登录显示的名称
    }
  },

  created() {
    this.showInfo()
  },
  mounted() {
    //注册全局登录事件对象
    window.loginEvent = new Vue();
    //监听登录事件
    loginEvent.$on('loginDialogEvent', function () {
      document.getElementById("loginDialog").click();
    })
    //触发事件，显示登录层：loginEvent.$emit('loginDialogEvent')
    //初始化微信js
    const script = document.createElement('script')
    script.type = 'text/javascript'
    script.src = 'https://res.wx.qq.com/connect/zh_CN/htmledition/js/wxLogin.js'
    document.body.appendChild(script)

    //微信登录回调处理
    let self = this;
    window["loginCallback"] = (name, token, openid) => {
      self.loginCallback(name, token, openid);
    }
  },
  methods: {
    //微信登录回调方法
    loginCallback(name, token, openid) {
      //打开手机登录层，绑定手机号，改逻辑与手机登录一致
      if (openid != null) {
        this.userInfo.openid = openid
        this.showLogin()
      } else {
        this.setCookies(name, token)
      }
    },

    //   绑定登录或获取验证码按钮
    btnClick() {
      //   判断是获取验证码还是登录
      if (this.dialogAtrr.loginBtn == '获取验证码') {
        this.userInfo.phone = this.dialogAtrr.inputValue

        //   获取验证码
        this.getCodeFun()
      } else {
        //   登录
        this.login()
      }
    },

    //   绑定登录，点击显示登录层
    showLogin() {
      this.dialogUserFormVisible = true

      //   初始化登录层相关参数
      this.dialogAtrr = {...defaultDialogAtrr}
    },

    //   登录
    login() {
      this.userInfo.code = this.dialogAtrr.inputValue

      if (this.dialogAtrr.loginBtn == '正在提交...') {
        this.$message.error('重复提交')
        return;
      }
      if (this.userInfo.code == '') {
        this.$message.error('验证码必须输入')
        return;
      }
      if (this.userInfo.code.length != 6) {
        this.$message.error('验证码格式不正确')
        return;
      }
      this.dialogAtrr.loginBtn = '正在提交...'
      userInfoApi.login(this.userInfo).then(response => {
        console.log(response.data)
        //   登录成功   设置cookie
        this.setCookies(response.data.name, response.data.token)
      }).catch(e => {
        this.dialogAtrr.loginBtn = '马上登录'
      })
    },

    setCookies(name, token) {
      cookie.set('token', token, {domain: 'localhost'})
      cookie.set('name', name, {domain: 'localhost'})
      window.location.reload()
    },

    //   获取验证码
    getCodeFun() {
      if (!(/^1[34578]\d{9}$/.test(this.userInfo.phone))) {
        this.$message.error('手机号码不正确')
        return;
      }

      //   初始化验证码相关属性
      this.dialogAtrr.inputValue = ''
      this.dialogAtrr.placeholder = '请输入验证码'
      this.dialogAtrr.maxlength = 6
      this.dialogAtrr.loginBtn = '马上登录'

      //   控制重复发送
      if (!this.dialogAtrr.sending) return;

      //   发送短信验证码
      this.timeDown();
      this.dialogAtrr.sending = false;
      smsApi.sendCode(this.userInfo.phone).then(response => {
        this.timeDown();
      }).catch(e => {
        this.$message.error('发送失败，重新发送')
        //   发送失败，回到重新获取验证码界面
        this.showLogin()
      })
    },

    //   倒计时
    timeDown() {
      if (this.clearSmsTime) {
        clearInterval(this.clearSmsTime);
      }
      this.dialogAtrr.second = 60;

      this.dialogAtrr.labelTips = '验证码已发送至' + this.userInfo.phone
      this.clearSmsTime = setInterval(() => {
        --this.dialogAtrr.second;
        if (this.dialogAtrr.second < 1) {
          clearInterval(this.clearSmsTime);
          this.dialogAtrr.sending = true;
          this.dialogAtrr.second = 0;
        }
      }, 1000);
    },

    //   关闭登录层
    closeDialog() {
      if (this.clearSmsTime) {
        clearInterval(this.clearSmsTime);
      }
    },

    showInfo() {
      let token = cookie.get('token')
      if (token) {
        this.name = cookie.get('name')
        console.log(this.name)
      }
    },

    loginMenu(command) {
      if ('/logout' == command) {
        cookie.set('name', '', {domain: 'localhost'})
        cookie.set('token', '', {domain: 'localhost'})

        //跳转页面
        window.location.href = '/'
      } else {
        window.location.href = command
      }
    },

    handleSelect(item) {
      window.location.href = '/hospital/' + item.hoscode
    },

    weixinLogin() {
      this.dialogAtrr.showLoginType = 'weixin'

      weixinApi.getLoginParam().then(response => {
        var obj = new WxLogin({
          self_redirect: true,
          id: 'weixinLogin', // 需要显示的容器id
          appid: response.data.appid, // 公众号appid wx*******
          scope: response.data.scope, // 网页默认即可
          redirect_uri: response.data.redirectUri, // 授权成功后回调的url
          state: response.data.state, // 可设置为简单的随机数加session用来校验
          style: 'black', // 提供"black"、"white"可选。二维码的样式
          href: '' // 外部css文件url，需要https
        })
      })
    },

    phoneLogin() {
      this.dialogAtrr.showLoginType = 'phone'
      this.showLogin()
    }
  }
}
</script>
